//经费认领 
<template>
  <div class="flex-1 flex-ver">
    <div class="mb8">
      <search @clearSearch='clearSearch'>
        <el-form label-width='95px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="项目名称">
            <el-input size="medium" clearable v-model.trim="pageparm.project_name" placeholder="请输入项目名称搜索"/>
          </el-form-item> 
          <el-form-item label="认领人姓名">
            <inputSearch ref="employee" @onChange='searchChane($event,"claim_employees_id")' placeholder='请输入认领人姓名搜索' />
          </el-form-item> 
        </el-form>
        <exportExcel slot="footer" :apiFn="Apifundsclaimrecord" name='经费认领'  />
      </search>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="100%" size="medium" 
      border 
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange">  
      <el-table-column
        align="center"
        v-for="(item,i) in headerList"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label + (item.unit || '')"
        :min-width="item.width"
        :fixed="i === 0 ? true: false"
        show-overflow-tooltip
        :sortable="item.noSort?false:'custom'">
        <template slot-scope="scope">
          <template v-if="item.prop === 'claim_employees_id'">
            {{ scope.row.employee ? scope.row.employee.name : "" }}
          </template>
          <template v-else>
           {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
   
  </div>
</template>

<script>

import {
    Apifundsclaimrecord,
} from '@/api'
import { debounce } from "@/utils/index";
import {headerList} from '../js/claim'
export default {
  computed:{
      editHeaderList(){
        let list = [...headerList]
        return list.sort((a,b) => b.required - a.required)
      }
  },
  data(){
    return{
      Apifundsclaimrecord,
      tableData:[], 
      editFormVisible: false, 
      editForm: {},  //修改或者查看详情

      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: null, 
        sort_order: 'desc' ,
      },
      tableLoading: false,

      btnLoading: false,

      headerList,

      middleList:[],
    }
  },
  mounted(){
    this.getList()
  },
  methods:{
    //审核
    echo(i,arr){
      let label
      for (const item of arr) {
        if(item.value === i){
          label = item.label
          break;
        }
      }
      return label
    },
    tableSortChange(column){
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList()
    },
    //搜索
    clearSearch(){
      this.$refs.employee.clear()
    },
    searchChane(i,val){
      this.pageparm[val] = i
      this.pageparm.page = 1
      this.getList()
    },
    //分页
    callFather(pageparm){
      this.pageparm.page = pageparm.page
      this.pageparm.perPage = pageparm.perPage
      this.getList()
    },
    getList(){
      this.tableLoading = true
      Apifundsclaimrecord(this.pageparm).then(({data,page}) => {
        this.tableData = data || []
        this.pageparm.total = page.total
        this.tableLoading = false
      }).catch(()=>{
        this.tableLoading = false
      })
    },
  }
}
</script>